<template>

  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>专业负责人</el-breadcrumb-item>
      <el-breadcrumb-item>指标信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="searchForm">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" placeholder="请输入课程代码" clearable @clear="getCourseList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getCourseList" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-button style="position: absolute; right: 650px" type="" @click="addDialogVisible=true">指标查询统计</el-button>
        <el-button style="position: absolute; right: 820px" type="" @click="CourseDialogVisible=true">课程统计</el-button>
      </el-form>

      <el-dialog title="课程统计" :visible.sync="CourseDialogVisible" width="80%" @close="CourseDialogClose">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="queryInfo.query" placeholder="请输入需要查询的课程名" clearable @clear="getCorseSupportsList"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="" @click="getCorseSupportsList" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :header-cell-style="{background:'#113f3d',color:'#FFFFFF'}" border stripe :data="List2" style="width: 100%">
          <el-table-column prop="cname" label="课程名称" width="460" align="center">
          </el-table-column>
          <el-table-column prop="h" label="H（高支撑度）" align="center">
          </el-table-column>
          <el-table-column prop="m" label="M（中支撑度）" align="center">
          </el-table-column>
          <el-table-column prop="l" label="L（低支撑度）" align="center">
          </el-table-column>
        </el-table>

        <div>
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="queryInfo2.pageNum"
            :page-sizes="[4]"
            :page-size="queryInfo2.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2">
          </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="CourseDialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>


      <el-dialog title="指标查询统计" :visible.sync="addDialogVisible" width="80%" @close="addDialogClose">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="queryInfo.query" placeholder="请输入需要查询的指标编号" clearable @clear="getIndicatorList"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="" @click="getIndicatorList" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :header-cell-style="{background:'#113f3d',color:'#FFFFFF'}" border stripe :data="List1" style="width: 100%">
          <el-table-column prop="sid"  width="80" label="指标编号" align="center">
          </el-table-column>
          <el-table-column prop="sindicname" label="指标名称" width="460" align="center">
          </el-table-column>
          <el-table-column prop="h" label="H（高支撑度）" align="center">
          </el-table-column>
          <el-table-column prop="m" label="M（中支撑度）" align="center">
          </el-table-column>
          <el-table-column prop="l" label="L（低支撑度）" align="center">
          </el-table-column>
        </el-table>

        <div>
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="queryInfo1.pageNum"
            :page-sizes="[4]"
            :page-size="queryInfo1.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1">
          </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>



      <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">
        <el-table-column type="index"  width="80" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="courseid" label="课程编号" width="160" align="center">
        </el-table-column>
        <el-table-column prop="cname" label="课程名" width="380" align="center">
        </el-table-column>

        <el-table-column prop="state" label="指标详情" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="指标支撑度管理" placement="top-start">
              <el-button  icon="el-icon-tickets" circle @click="showCourse(scope.row.courseid,scope.row.cname)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改课程信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose" append-to-body>
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">

          <el-form-item label="对应专业" prop="major">
            <el-input v-model="editForm.major" autocomplete="off"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCourseInfo">修 改</el-button>
        </div>
      </el-dialog>


    </div>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>

</template>


<script>
export default {

  created(){
    this.getCourseList();
    this.getIndicatorList();
    this.getCorseSupportsList();
  },
  data() {
    return {
      queryInfo:{
        query:'',//查询信息
        role:'',
        pageNum:1,
        pageSize:4
      },
      queryInfo1:{
        query:'',//查询信息
        role:'',
        pageNum:1,
        pageSize:4
      },
      queryInfo2:{
        query:'',//查询信息
        role:'',
        pageNum:1,
        pageSize:4
      },
      List:[],
      List1:[],
      List2:[],
      total:0,
      total1:0,
      total2:0,
      addDialogVisible:false,
      editDialogVisible:false,
      infoDialogVisible:false,
      CourseDialogVisible:false,
      addForm:{
        cname:'',
        username:this.$session.get('bull'),
        courseid:'',
        major:'',
        attribute:''
      },
      editForm:{
        password:'',
        memorandum:''
      },
      infoForm:{
        courseid:'',
        ord:'',
        coursedata:'',
        coursetime:'',
        goal:'',
        secondindicid:'',
      },
      addFormRules: {
        cname: [
          { required: true, message: '请输入正确课程名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],

        points:[
          { required: true, message:'请选择学分', trigger: 'blur' }
        ],
        period:[
          { required: true, message:'请输入学时', trigger: 'blur' }
        ],
        attribute:[
          { required: true, message:'请输入课程性质', trigger: 'blur' }
        ],
        theory:[
          { required: true, message:'请输入理论学时', trigger: 'blur' }
        ],
        practice:[
          { required: true, message:'请输入实验学时', trigger: 'blur' }
        ],
        major:[
          { required: true, message:'请输入专业', trigger: 'blur' }
        ],
        courseid:[
          { required: true, message:'请输入ID', trigger: 'blur'}
        ],
      },

      editFormRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      },
      infoFormRules: {

      },
    }
  },


  methods: {
    async getCourseList () {
      const { data: res } = await this.$http.get("Courses/AllCourse", { params: this.queryInfo })
      this.List = res.data;
      this.total = res.numbers;
    },
    async getIndicatorList() {
      const { data: res } = await this.$http.get("CourseIndicatorSupports/CourseIndicatorSupportCountsList", { params: this.queryInfo })
      this.List1 = res.data;
      this.total1 = res.numbers;
    },
    async getCorseSupportsList() {
      const { data: res } = await this.$http.get("CourseIndicatorSupports/CourseSupportCountsList", { params: this.queryInfo })
      this.List2 = res.data;
      this.total2 = res.numbers;
    },
    showCourse (courseid,cname) {
      this.$session.set("bulls",courseid);
      this.$session.set("coursename",cname);
      this.$router.push({path:'/indicator_info'});
    },
    async makeCourse(courseid){
      const { data: res } = await this.$http.put("Courses/CourseState?state=1&courseid="+courseid+'');
      console.log(res);
      if (res !== "success") return this.$message.error("发布失败");
      this.$message.success("发布成功");
      this.getCourseList();
    },

    editCourseInfo () {
      this.$refs.editFormRef.validate(async valid => {
        console.log(valid);
        if (!valid) return;

        const { data: res } = await this.$http.put("Courses/Course", this.editForm);
        console.log(res);
        if (res !== "success") return this.$message.error("修改失败");
        this.$message.success("修改成功");

        this.editDialogVisible = false;
        this.getCourseList();
      });
    },
    async editCourse(courseid){
      const {data:res} = await this.$http.get("Courses/CourseMessage?courseid="+courseid);
      this.editForm = res;
      this.editDialogVisible = true;
    },
    async deleteCourse (courseid) {

      const confirmResult = await this.$confirm('是否删除该课程？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return ;
      }
      const { data: res } = await this.$http.delete("Courses/Course?courseid=" + courseid);
      if (res !== "success") {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getCourseList();
    },
    addCourseBase () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;
        const { data: res } = await this.$http.post("Courses/Course", this.addForm);
        if (res !== "success") {
          return this.$message.error("添加失败!")
        }
        this.$message.success("添加成功！")
        this.$session.set("bulls",this.addForm.courseid);
        this.$session.set("coursename",this.addForm.cname);
        this.addDialogVisible = false;
        this.getCourseList();

        const confirmResult = await this.$confirm('是否立刻完善该课程基础信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '稍后',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return ;
        }
        this.$router.push({path:'/Fundamentalinfo'});
      })
    },
    async changeSwitch (state,courseid,cname) {
      const { data: res } = await this.$http.put("Courses/CourseState?state=" + state + "&courseid="+courseid);
      if (res !== "success") return this.$message.error("操作失败!");
      else{
        if(state == 1){
          this.$message.success("课程" + cname +"发布成功!");
          this.List[index].state = 1;
        }
        else
          this.$message.warning("课程" + cname +"已经取消发布!");
      }
      this.getCourseList();
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize;
      this.getCourseList();
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage;
      this.getCourseList();
    },
    addDialogClose () {
      this.$refs.addFormRef.resetFields();
    },
    editDialogClose () {
      this.$refs.editFormRef.resetFields();
    },
    CourseDialogClose () {
      this.$refs.CourseFormRef.resetFields();
    },
    handleSizeChange1 (newSize) {
      this.queryInfo.pageSize = newSize;
      this.getIndicatorList();
    },
    handleCurrentChange1 (newPage) {
      this.queryInfo.pageNum = newPage;
      this.getIndicatorList();
    },
    handleSizeChange2 (newSize) {
      this.queryInfo.pageSize = newSize;
      this.getCorseSupportsList();
    },
    handleCurrentChange2 (newPage) {
      this.queryInfo.pageNum = newPage;
      this.getCorseSupportsList();
    },
    addDialogClose1 () {
      this.$refs.addFormRef.resetFields();
    },
    editDialogClose1 () {
      this.$refs.editFormRef.resetFields();
    },
  }
}
</script>




<style scoped>
.searchForm{
  margin-top: 40px;
}
</style>
